<template>
  <view class="popBox" @click="center">
    <view class="popBody" @click.native.stop>
      <view class="head">
        <view class="title">{{ title }}</view>
      </view>
      <view class="popCon scrollParentHeight">
        <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
          <rich-text class="scrollHeight" :nodes="content" bindtap="tap"></rich-text>
        </scroll-view>
      </view>
      <view class="popFoot">
        <view v-if="notArriveBottom" class="spans center gray">请向上滑动直到底部</view>
        <view v-else class="spans center">
          <view v-if="identityId === 1" @click="center">确定</view>
          <view v-else @click="center">确定</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * 阅读协议同意组件
 */
export default {
  props: {
    // 是否展示搜索按钮
    title: {
      type: String,
      default: '标题'
    },
    content: {
      type: String,
      default: '内容'
    },
    articleIndex: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      scrollTop: 0,
      old: {
        scrollTop: 0
      },
      notArriveBottom: true
    };
  },
  computed: {
    // 关系
    identityId() {
      return this.$store.state.join.storeFormData.identity;
    }
  },
  mounted() {
    this.lower();
    this.getScrollHieght();
  },
  methods: {
    close() {
      this.$emit('popClose', this.articleIndex);
    },
    center() {
      this.$emit('popCenter', this.articleIndex);
    },
    lower(e) {
      this.notArriveBottom = false;
    },
    getScrollHieght() {
      // 判断文章长度是否足够出现滚动条
      let articleHeight = '';
      let articleParentHeight = '';
      uni
        .createSelectorQuery()
        .in(this)
        .select('.scrollHeight')
        .boundingClientRect()
        .exec((res) => {
          console.log(111, res);
          articleHeight = res[0].height;
          uni
            .createSelectorQuery()
            .in(this)
            .select('.scrollParentHeight')
            .boundingClientRect()
            .exec((res) => {
              articleParentHeight = res[0].height;
              console.log(articleHeight, articleParentHeight);
              if (articleHeight + 50 <= articleParentHeight) {
                this.notArriveBottom = false;
              } else {
                this.notArriveBottom = true;
              }
            });
        });
    }
  }
};
</script>

<style lang="scss">
.popBox {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9999;
  .popBody {
    background-color: #fff;
    border-radius: 24rpx;
    width: 700rpx;
    height: 75%;
    padding: 70rpx 0;
    margin: 0 auto;
    position: fixed;
    left: 50%;
    top: 6%;
    transform: translate(-50%, 0);
    z-index: 9999;
    overflow: hidden;
    .head {
      position: fixed;
      top: 0%;
      left: 50%;
      transform: translate(-50%, 0);
      padding: 14rpx 0;
      width: 700rpx;
      text-align: center;
      background-color: #f3f3f3;
      font-size: 32rpx;
      z-index: 10;
    }
    .popCon {
      padding: 24rpx;
      font-size: 28rpx;
      height: 91%;
      padding-top: 50rpx;
    }
    .popFoot {
      width: 700rpx;
      bottom: 0;
      z-index: 10;
      display: flex;
      font-size: 32rpx;

      .spans {
        flex: 1;
        padding: 18rpx 28rpx;
        text-align: center;
      }
      .close {
        background-color: #f3f3f3;
      }
      .center {
        background-color: #f34e1c;
        color: #fff;
        &.gray {
          background: white;
          color: #e8e8e8;
          border-top: 1px solid #e8e8e8;
        }
      }
    }
  }
}
.scroll-Y {
  height: 100%;
}
</style>
